<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="../html/classes/normalize.css">
    <link rel="stylesheet" href="./qimo-1.css">
 
</head>

<body>
    <div id="app">
        <!-- 最顶上的大导航栏 -->
        <div class="top">
            <img src="../../img/3.png" class="nav" />
            <h1>网易云音乐</h1>
            <a href="javascript:void(0)">发现音乐</a>
            <a href="javascript:void(0)">我的音乐</a>
            <a href="javascript:void(0)">关注</a>
            <a href="javascript:void(0)">商城</a>
            <a href="javascript:void(0)">音乐人</a>
            <a href="javascript:void(0)">下载客户端</a>
            <input />
            <p><a href="javascript:void(0)">创作者中心</a></p>
            <p><a href="javascript:void(0)">登录</a></p>

        </div>
        <!-- 小导航栏 -->
        <div class="minTop">
            <a href="javascript:void (0)">推荐</a>
            <a href="javascript:void (0)">排行榜</a>
            <a href="javascript:void (0)">歌单</a>
            <a href="javascript:void (0)">主播电台</a>
            <a href="javascript:void (0)">歌手</a>
            <a href="javascript:void (0)">新蝶上架</a>
        </div>
        <!--  中间轮播图的板块-->
        <div class="photo9" id="photo">
            <a href="JavaScript:;" index="9"></a>
            <a href="JavaScript:;" index="10"></a>
            <a href="JavaScript:;" index="11"></a>
            <a href="JavaScript:;" index="12"></a>
            <a href="JavaScript:;" index="13"></a>
            <a href="JavaScript:;" index="14"></a>
            <a href="JavaScript:;" index="15"></a>
            <a href="JavaScript:void(0)" id="ico"><img src="../img/66.png"></a>
            <a href="JavaScript:void(0)" id="ico1"><img src="../img/99.png"></a>
            <img src="../img/9.PNG" id="photoImg">
        </div>

        <!-- 中间板块 -->
        <div class="substance">
            <div class="middle">
                <!-- 内容左边部分 -->
                <div class="left">
                    <!-- 热门推荐 -->
                    <div class="hotRecommend">
                        <div>
                            <!--      热门推荐导航栏-->
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="../img/2.png" class="nvc" />
                                <span>热门推荐</span>
                                <a>|</a>
                                <a href="javascript:void (0)">华语</a>
                                <a>|</a>
                                <a href="javascript:void (0)">流行</a>
                                <a>|</a>
                                <a href="javascript:void (0)">摇滚</a>
                                <a>|</a>
                                <a href="javascript:void (0)">民谣</a>
                                <a>|</a>
                                <a href="javascript:void (0)">电子</a>
                                <a href="javascript:void (0)" style="float: right;margin-right: 60px">更多</a>
                            </p>
                            <p>
                                <!--        ../../../assets/../img/7.jpg-->
                                <a href="javascript:void(0)"><img src="../img/7.jpg">
                                    <br>戳爷/黄老板/断眉/萌<br>德/骚姆/比伯/烟卷</a>
                                <a href="javascript:void(0)"><img src="../img/8.jpg">
                                    <br>看书刷题+纯音乐【学<br>习专用】</a>
                                <a href="javascript:void(0)"><img src="../img/9.jpg">
                                    <br>华语民谣 I 孤独的心<br>诠释诗意和远方</a>
                                <a href="javascript:void(0)"><img src="../img/10.jpg">
                                    <br> 月亮背面，是我宇宙<br>级的孤独</a>
                                <a href="javascript:void(0)"><img src="../img/11.jpg">
                                    <br>Future Beats ◐ 糟糕<br>，是心肌梗塞的感觉<br>！</a>
                                <a href="javascript:void(0)"><img src="../img/12.jpg">
                                    <br> 老祖宗她是真的狂-0<br>01-穿成了老祖宗<br>求订阅！求关注！...</a>
                                <a href="javascript:void(0)"><img src="../img/13.jpg">
                                    <br>【万评电音】抬头<br>，已是一片星海</a>
                                <a href="javascript:void(0)"><img src="../img/14.jpg">
                                    <br> 爱能克服远距离</a>
                            </p>
                        </div>

                    </div>
                    <!-- 新碟上架 -->
                    <div class="newDisc">
                        <div>
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="../img/2.png" class="nvc" />
                                <span>新蝶上架</span>
                                <a href="javascript:void (0)">更多</a>

                            </p>
                            <p>
                                <a href="javascript:void(0)"><img src="../img/15.jpg">
                                    <br>冷暖迁徙 <br>kKzk赵珂</a>
                                <a href="javascript:void(0)"><img src="../img/16.jpg">
                                    <br>MeAgainst The<br> World Melo</a>
                                <a href="javascript:void(0)"><img src="../img/17.jpg">
                                    <br>无归属的她<br>祁紫檀</a>
                                <a href="javascript:void(0)"><img src="../img/18.jpg">
                                    <br>启示录<br>G.E.M.邓紫棋</a>
                                <a href="javascript:void(0)"><img src="../img/19.jpg">
                                    <br>Autofiction<br>Suede</a>

                            </p>
                        </div>
                    </div>
                    <!-- 榜单 -->
                    <div class="list">
                        <div>
                            <p>
                                <!--    <p>热门推荐</p>-->
                                <img src="../img/2.png" class="nvc" />
                                <span>榜单</span>
                                <a href="javascript:void (0)">更多</a>

                            </p>
                            <table>
                                <thead>
                                    <th><a href="javascript:void (0)"><img src="../img/21.png" />飙升榜</a>
                                    </th>
                                    <th><a href="javascript:void (0)"><img src="../img/22.png" />新歌榜</a>
                                    </th>
                                    <th><a href="javascript:void (0)"><img src="../img/23.png" />原创榜</a>
                                    </th>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>1<a href="javascript:void (0)"> &nbsp 紫荆花盛开</a></td>
                                        <td>1<a href="javascript:void (0)"> &nbsp 狂恋</a></td>
                                        <td>1<a href="javascript:void (0)"> &nbsp 我回来了</a></td>
                                    </tr>
                                    <tr>
                                        <td>2<a href="javascript:void (0)"> &nbsp 绯红</a></td>
                                        <td>2<a href="javascript:void (0)"> &nbsp 回答</a></td>
                                        <td>2<a href="javascript:void (0)"> &nbsp 不晚</a></td>
                                    </tr>
                                    <tr>
                                        <td>3<a href="javascript:void (0)"> &nbsp 逃生舱</a></td>
                                        <td>3<a href="javascript:void (0)"> &nbsp 达尔文 2022</a></td>
                                        <td>3<a href="javascript:void (0)"> &nbsp 只爱我自己</a></td>
                                    </tr>
                                    <tr>
                                        <td>4<a href="javascript:void (0)"> &nbsp 把回忆拼好给你</a></td>
                                        <td>4<a href="javascript:void (0)"> &nbsp 那么骄傲</a></td>
                                        <td>4<a href="javascript:void (0)"> &nbsp 陪你看流星</a></td>
                                    </tr>
                                    <tr>
                                        <td>5<a href="javascript:void (0)"> &nbsp 漫游</a></td>
                                        <td>5<a href="javascript:void (0)"> &nbsp 骂醒我 2022</a></td>
                                        <td>5<a href="javascript:void (0)"> &nbsp 这首歌要单曲循环好多遍</a></td>
                                    </tr>
                                    <tr>
                                        <td>6<a href="javascript:void (0)"> &nbsp 达尔文2022</a></td>
                                        <td>6<a href="javascript:void (0)"> &nbsp 当爱在靠近（咽喉）</a></td>
                                        <td>6<a href="javascript:void (0)"> &nbsp 海的女儿</a></td>
                                    </tr>
                                    <tr>
                                        <td>7<a href="javascript:void (0)"> &nbsp 那么骄傲</a></td>
                                        <td>7<a href="javascript:void (0)"> &nbsp 人啊人</a></td>
                                        <td>7<a href="javascript:void (0)"> &nbsp 躺着的人生(Live)</a></td>
                                    </tr>
                                    <tr>
                                        <td>8<a href="javascript:void (0)"> &nbsp 蝴蝶,姐姐,和歌</a></td>
                                        <td>8<a href="javascript:void (0)"> &nbsp 写不来的情歌</a></td>
                                        <td>8<a href="javascript:void (0)"> &nbsp 蝴蝶,姐姐,和歌</a></td>
                                    </tr>
                                    <tr>
                                        <td>9<a href="javascript:void (0)"> &nbsp 群青</a></td>
                                        <td>9<a href="javascript:void (0)"> &nbsp 再见我的女孩</a></td>
                                        <td>9<a href="javascript:void (0)"> &nbsp 故事</a></td>
                                    </tr>
                                    <tr>
                                        <td>10 <a href="javascript:void (0)">&nbsp 流动的盛宴(Hierarchy)</a></td>
                                        <td>10 <a href="javascript:void (0)">&nbsp 午夜恰恰</a></td>
                                        <td>10 <a href="javascript:void (0)">&nbsp 滴滴答答</a></td>
                                    </tr>
                                    <tr>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                        <td><a href="javascript:void (0)" class="last">查看全部></a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 右边部分 -->
                <div class="right">
                    <!-- 登陆部分 -->
                    <div class="login">
                        <p>
                            登录网易云音乐，可享受无限收藏的乐趣，并无限同步到手机
                        </p>
                        <a href="javascript:void(0)">用户登录</a>
                    </div>
                    <!-- 入驻歌手部分 -->
                    <div class="singer">
                        <div>
                            <p>
                                <span>入驻歌手</span>
                                <a href="javascript:void (0)">查看全部></a>
                            </p>
                            <p>
                                <a href="javascript:void (0)"><img src="../img/24.jpg" /><span>吴莫愁
                                    </span>
                                </a>
                                <a href="javascript:void (0)"><img src="../img/25.jpg" /><span>张惠妹</span></a>
                                <a href="javascript:void (0)"><img src="../img/26.jpg" /><span>孙楠</span></a>
                                <a href="javascript:void (0)"><img src="../img/27.jpg" /><span>麦田老狼</span></a>
                                <a href="javascript:void (0)"><img src="../img/28.jpg" /><span>舒志伟</span></a>
                                <a href="javascript:void (0)" class="apply">申请成为网易音乐人</a>
                            </p>
                        </div>

                    </div>
                    <!-- 热门主播 -->
                    <div class="anchor">
                        <div>
                            <p>
                                <span>入驻歌手</span>
                            </p>
                            <div>
                                <a href="javascript:void (0)">
                                    <div><img src="../img/29.jpg" />
                                        <h5>疯狂小杨哥</h5>
                                        <br />
                                        <font>搞笑大师/抖音大V</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="../img/30.jpg" />
                                        <h5>薛子谦</h5>
                                        <br />
                                        <font>音乐鬼才/搞怪歌手</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="../img/31.jpg" />
                                        <h5>郭聪明</h5>
                                        <br />
                                        <font>搞怪歌手/抖音大V</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="../img/32.jpg" />
                                        <h5>吴磊</h5>
                                        <br />
                                        <font>超新星/硬汉</font>
                                    </div>
                                </a><a href="javascript:void (0)">
                                    <div><img src="../img/33.jpg" />
                                        <h5>赵露思</h5>
                                        <br />
                                        <font>超新星/段子手</font>
                                    </div>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="bottom">
            <div>
                <!-- 底部左边 -->
                <div>
                    <span>
                        <a href="javascript:void(0)">服务条款</a>
                        <a href="javascript:void(0)">隐私政策</a>
                        <a href="javascript:void(0)">版本投诉</a>
                        <a href="javascript:void(0)">投资者关系</a>
                        <a href="javascript:void(0)">广告合作</a>
                        <a href="javascript:void(0)">廉政举报</a>
                        <a href="javascript:void(0)">联系我们</a>
                    </span>
                    <br />
                    <br />
                    <p>
                        <a href="javascript:void(0)">钢蛋公司版权所有©1997-2022九江佳鸡有限公司运营：赣网文[2021] 1186-054号
                            赣<br><br>B2-20090191-18 工业和信息化部备案管理系统网站 </a><img src="../img/34.png">
                        <a href="javascript:void(0)">赣公网安备 33010902002564号</a><br><br>
                        互联网宗教信息服务许可证：赣（2022）0000120 监督举报邮箱：1583523027@qq.com
                    </p>
                </div>
                <!-- 底部右边 -->
                <div>
                    <p><a href="javascript:void(0)"><img src="../img/35.png" /></a><br>
                        Amped studio</p>
                    <p><a href="javascript:void(0)"><img src="../img/36.png" /></a><br>
                        用户认证</p>
                    <p><a href="javascript:void(0)"><img src="../img/37.png" /></a><br>
                        独立音乐人</p>
                    <p><a href="javascript:void(0)"><img src="../img/38.png" /></a><br>
                        赞赏</p>
                    <p><a href="javascript:void(0)"><img src="../img/39.png" /></a><br>
                        视频奖励</p>

                </div>

            </div>

        </div>
    </div>
</body>
<script>
    var img = document.getElementById('photoImg');
    var div = document.getElementById('photo');
    var al = div.getElementsByTagName('a');
    var a = document.getElementById('ico');
    var a1 = document.getElementById('ico1');
    var number = 8;
    function red() {
        for (i = 0; i < 7; i++) {
            if (al[i].getAttribute('index') == number) {
                al[i].style = ' background-color: #b60b0b';
            }
            else {
                al[i].style = ' background-color: #a8b0ad';
            }
        }
    }
    window.setInterval(() => {
        if (number < 15) {
            number++;
            img.src = '../img/' + number + '.png';
            red();
            div.className = 'photo' + number;
        }
        else {
            number = 8
        }
    }, 3000);
    a.onclick = () => {
        if (number > 9) {
            number--;
            img.src = '../img/' + number + '.png';
            red();
            div.className = 'photo' + number;
        }
        else {
            number = 15;
            img.src = '../img/' + number + '.png';
            red();
            div.className = 'photo' + number;
        }
    }
    a1.onclick = () => {
        if (number < 15) {
            number++;
            img.src = '../img/' + number + '.png';
            red();
            div.className = 'photo' + number;
        }
        else {
            number = 9;
            img.src = '../img/' + number + '.png';
            red();
            div.className = 'photo' + number;
        }
    }
    for (i = 0; i < 7; i++) {
        al[i].onclick = function () {
            number = this.getAttribute('index');
            red();
            img.src = '../img/' + number + '.png';
            div.className = 'photo' + number;
        }
    }

</script>

</html>